<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
		 -->
		<!-- 创建容器 -->
		<div id="root">
		姓:<input type="text" name="" id="" v-model="firstName" />
		名:<input type="" name="" id="" v-model="lastName" />
		全名:<span>{{fullName}}</span>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			const vm= new Vue({
				el:'#root',
				data:{
					firstName:'张',
					lastName:'三',
					fullName:'张-三'
				},
				watch:{
					firstName(newValue,oldValue){
						//引起全名的变化
						this.fullName=newValue+'-'+this.lastName
					},
					lastName(newValue,oldValue){
						//引起全名的变化
						this.fullName=this.firstName+'-'+newValue
					}
				}
			})
			
		</script>
	</body>
</html>
